<!-- 无控件的表头 -->
<template>
  <div class="wrap">
    <div class="wrap-used">
      <a-scrollbar style="height: 600px; overflow: auto">
        <div class="draggable-selected">
          <draggable
            class="item"
            :list="props.data"
            ghost-class="ghost"
            handle=".move"
            filter=".forbid"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            :fallback-class="true"
            :fallback-on-body="true"
            :touch-start-threshold="10"
            :fallback-tolerance="10"
            :sort="true"
            itemKey="code"
          >
            <template #item="{ element }">
              <a-space direction="vertical" class="item-box" :size="16">
                <div class="item-box-container move">
                  <icon-drag-dot-vertical :size="16" />
                  <span
                    :style="{
                      marginLeft: '10px',
                    }"
                  >
                    {{ element.groupName }}
                  </span>
                </div>
              </a-space>
            </template>
          </draggable>
        </div>
      </a-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, watch, watchEffect } from "vue";
import Draggable from "vuedraggable";
import cloneDeep from "lodash.clonedeep";

const props = withDefaults(
  // 参数说明
  defineProps<{
    data?: any[];
  }>(),
  {}
);

const emits = defineEmits(["update:data", "headerSave"]);
const list = computed({
  get: () => props.data,
  set: (val) => emits("headerSave"),
});
</script>

<style scoped lang="less">
.wrap {
  display: flex;
  justify-content: space-between;

  &-unused {
    flex: 4;
    border: 1px solid #ccc;
    margin-right: 10px;
    height: 600px;
    padding: 10px;
  }

  &-used {
    flex: 2;
    border: 1px solid #ccc;
    padding: 10px;
    .draggable {
      &-selected {
        padding-bottom: 20px;

        .item {
          &-box {
            width: 100%;
            cursor: move;
            &-container {
              // background-color: #f2f3f5;
              height: 50px;
              line-height: 50px;
            }
            &-container:hover {
              background-color: #f2f3f5;
            }
          }
        }
      }
      // &-unselected {
      //   .item {
      //     display: flex;
      //     flex-wrap: wrap;
      //     width: 100%;
      //     background-color: #4e5969;
      //     &-box {
      //       width: 100%;
      //       margin: 0 10px 10px 0;
      //       &-container {
      //         background-color: #f2f3f5;
      //       }
      //     }
      //   }
      // }
    }
  }
}
</style>
